// 返回顶部操作
window.onscroll = function () {
  if (document.documentElement.scrollTop >= 800) {
    $('.toTop').style.display = 'block'
  } else {
    $('.toTop').style.display = 'none'
  }
}
$('.toTop').onclick = function () {
  animate(document.documentElement, 'scrollTop', 0)
}

// 获取对应数据
var flag = getQueryString('id')
var datas
detail.forEach(function (item) {
  if (item.id === flag) {
    datas = item
  }
})

// 标题部分
$('.good_detail_nav').innerHTML = `<a href="./index.html">商城首页</a><i>/</i>
      <a href="./list.html?class=${datas.class}">${datas.titleparent[0]}</a><i>/</i>
      <span>大疆迷你小背包</span>`

//右边内容部分
$('.right_head .title').innerText = `${datas.title}`
$('.right_head .price>span').innerText = `${datas.price}`

// 左边小图部分
var template = ''
datas.description.forEach(function (item) {
  template += `<p><i>·</i>${item}</p>`
})
$('.right_body').innerHTML = template

var template2 = ''
datas.imggood.forEach(function (item) {
  template2 += `<div
            style="background-image: url('${item}');">
          </div>`
})
$('.bg_small').innerHTML = template2


//大图部分 
$('.bg_pro').style.backgroundImage = `url(${datas.imggood[0]})`

// 产品概览部分
var template3 = ''
datas.imgds.forEach(function (item) {
  template3 += `<img src="${item}" alt="">`
})
$('.goods_detail_pic .img').innerHTML = template3

// 点击切换图片
// 默认选中第一张
$('.bg_small div')[0].className = 'active'
$('.bg_detail>img').src = `${datas.imggood[0]}`
for (var i = 0; i < $('.bg_small div').length; i++) {
  // 初始化下标
  var preIndex = 0
  // 保存本次下标
  $('.bg_small div')[i].index = i
  $('.bg_small div')[i].onclick = function () {
    // 清除上次样式
    $('.bg_small div')[preIndex].className = ''
    this.className = 'active'
    $('.bg_pro').style.backgroundImage = `url(${datas.imggood[this.index]})`
    $('.bg_detail>img').src = `${datas.imggood[this.index]}`
    preIndex = this.index
  }
}

// 放大镜效果

// 鼠标进入显示大图和遮罩层
$('.bg_pro').onmouseenter = function () {
  $('.mask').style.display = 'block'
  $('.bg_detail').style.display = 'block'
}
// 鼠标离开隐藏大图和遮罩层
$('.bg_pro').onmouseleave = function () {
  $('.mask').style.display = 'none'
  $('.bg_detail').style.display = 'none'
}

// 鼠标在大图移动
$('.bg_pro').onmousemove = function (e) {
  var left = e.pageX - offset($('.bg_pro')).left - $('.mask').clientWidth / 2
  var top = e.pageY - offset($('.bg_pro')).top - $('.mask').clientHeight / 2

  // 判断左右最小距离
  if (left <= 0) {
    left = 0
  }

  // 判断左右最大距离
  if (left >= $('.bg_pro').clientWidth - $('.mask').clientWidth) {
    left = $('.bg_pro').clientWidth - $('.mask').clientWidth
  }
  // 判断上下最小距离
  if (top <= 0) {
    top = 0
  }

  // 判断上下最大距离
  if (top >= $('.bg_pro').clientHeight - $('.mask').clientHeight) {
    top = $('.bg_pro').clientHeight - $('.mask').clientHeight
  }

  $('.mask').style.left = left + 'px'
  $('.mask').style.top = top + 'px'

  // 右边大图效果
  // 计算移动距离的比例
  var scaleX = left / ($('.bg_pro').clientWidth - $('.mask').clientWidth)
  var scaleY = top / ($('.bg_pro').clientHeight - $('.mask').clientHeight)

  // 计算大图片移动的距离
  var bigLeft = scaleX * ($('.bg_detail>img').clientWidth - $('.bg_detail').clientWidth)
  var bigTop = scaleY * ($('.bg_detail>img').clientHeight - $('.bg_detail').clientHeight)

  // 大图和遮罩层移动方向相反
  $('.bg_detail>img').style.left = -bigLeft + 'px'
  $('.bg_detail>img').style.top = -bigTop + 'px'
}